<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>登录商城</title>
    <link rel="stylesheet" href="style/base.css" type="text/css">
    <link rel="stylesheet" href="style/global.css" type="text/css">
    <link rel="stylesheet" href="style/header.css" type="text/css">
    <link rel="stylesheet" href="style/login.css" type="text/css">
    <link rel="stylesheet" href="style/footer.css" type="text/css">

</head>
<body>

<div id="app">
    <!-- 顶部导航 start -->
    <topnav_topnav></topnav_topnav>
    <!-- 顶部导航 end -->
    <div style="clear:both;"></div>
    <!-- 页面头部 start -->
    <div class="header w990 bc mt15">
        <div class="logo w990">
            <h2 class="fl"><a href="index.html"><img src="images/logo.png" alt="商城"></a></h2>
        </div>
    </div>
    <!-- 页面头部 end -->

    <!-- 登录主体部分start -->
    <div class="login w990 bc mt10">
        <div class="login_hd">
            <h2>用户登录</h2>
            <b></b>
        </div>
        <div class="login_bd">
            <div class="login_form fl">
                <form action="" method="post">
                    <ul>
                        <li>
                            <label for="">手机号：</label>
                            <input type="text" class="txt" ref="mobile" v-model="regForm.mobile"/>

                        </li>
                        <li>
                            <label for="">密码：</label>
                            <input type="password" class="txt" ref="password" v-model="regForm.password"/>
                            <a href="">忘记密码?</a>
                        </li>
                        <li class="checkcode">
                            <label for="">验证码：</label>

                            <input type="text" v-model="regForm.code" ref="code"/>
                            <img src="images/checkcode1.jpg" alt=""/>
                            <span>看不清？<a href="">换一张</a></span>
                        </li>
                        <li>
                            <label for="">&nbsp;</label>
                            <input type="checkbox" class="chb"/> 保存登录信息
                        </li>
                        <li>
                            <label for="">&nbsp;</label>
                            <button class="login_btn" @click.prevent="submit"></button>
                        </li>
                    </ul>
                </form>

                <div class="coagent mt15">
                    <dl>
                        <dt>使用合作网站登录商城：</dt>
                        <dd class="qq"><a href=""><span></span>QQ</a></dd>
                        <dd class="weibo"><a href=""><span></span>新浪微博</a></dd>
                        <dd class="yi"><a href=""><span></span>网易</a></dd>
                        <dd class="renren"><a href=""><span></span>人人</a></dd>
                        <dd class="qihu"><a href=""><span></span>奇虎360</a></dd>
                        <dd class=""><a href=""><span></span>百度</a></dd>
                        <dd class="douban"><a href=""><span></span>豆瓣</a></dd>
                    </dl>
                </div>
            </div>

            <div class="guide fl">
                <h3>还不是商城用户</h3>
                <p>现在免费注册成为商城用户，便能立刻享受便宜又放心的购物乐趣，心动不如行动，赶紧加入吧!</p>

                <a href="regist.html" class="reg_btn">免费注册 >></a>
            </div>

        </div>
    </div>
</div>

<!-- 登录主体部分end -->

<div style="clear:both;"></div>
<!-- 底部版权 start -->
<topnav_bottom></topnav_bottom>
<!-- 底部版权 end -->


<script src="js/vue.js"></script>
<script src="js/axios-min.js"></script>
<script src="js/mock-min.js"></script>
<script src="js/api.js"></script>
<script src="js/mock.js"></script>
<script src="components/topnav.js"></script>
<script>

    var vm = new Vue({
        el: "#app",
        data: {
            regForm: {
                password: '',
                mobile: '',
                code: '',
                cart: mokedata.cart
            }
        },
        methods: {
            submit() {
                // 表单校验

                if (this.regForm.mobile.length != 11) {
                    this.$refs.mobile.focus();
                    alert("手机号码请重新输入")
                    return
                }
                if (this.regForm.password.length < 6 || this.regForm.password.length > 20) {
                    this.$refs.password.focus();
                    alert("密码请重新输入")
                    return
                }
                if (this.regForm.code.length < 3) {
                    this.$refs.code.focus();
                    alert("验证码请重新输入")
                    return
                }
                login(this.regForm).then(res => {

                    if (res.data.errno == 0) {
                        // 保存信息到本地
                        localStorage.setItem("token", res.data.token)
                        localStorage.setItem("name", res.data.name)

                        alert("登录成功")
                        // 跳转至首页页面
                        location.href = "index.html"
                    } else {
                        alert(res.data.errmsg)
                    }
                })
            },

        },
    })
</script>

</body>
</html>